/*
* xxxx科技有限公司版权所有（）.
* Copyright (c) 2019, and/or its affiliates. All rights reserved.
* @Date: 2020.08.03 21:52.
* @Author
* @Description  列表系列组件 - 个人中心 --- 加油券使用状态列表
**/
<template>
  <ul class="ca-li">
    <li :key="item.petiolStationId" @click="handleListClick(item)" v-for="item in list">
      <p class="ca-name">{{item.orderName}} <span :class="getStatus(item.pay_status)">{{statusObj[item.pay_status]}}</span></p>
      <p class="ca-info">{{item.crate_time}}</p>
    </li>
  </ul>
</template>

<script>
import { statusObj } from '@/utils/const'
export default {
  name: 'UserData',
  props: ['list'],
  components: {},
  data() {
    return {
      statusObj: statusObj
    }
  },
  watch: {},
  mounted() {
  },
  created() {

  },
  methods: {
    /**
     *@Description
     *@Return 列表点击 事件监听.
     **/
    handleListClick(data) {
      this.$emit('singleDetail', data)
    },
    /**
     *@Description 0->待使用、 2->未支付、 3->已使用、 4->退款成功、 5->取消
                   0->待使用、 2->待支付、 3->已使用、 4->退款成功、 5->已取消
     *@Return 列表点击 事件监听.
     **/
    getStatus(type) {
      if (type == '0') {// 待使用
        return 'status0 fr'
      }
      if (type == '2') {// 未支付
        return 'status2 fr'
      }
      if (type == '3') {// 已使用
        return 'status3 fr'
      }
      if (type == '4') {// 退款成功
        return 'status4 fr'
      }
      if (type == '5') {// 取消
        return 'status5 fr'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.ca-li {
  padding: 0 15px;
  color: #000;
  li {
    padding: 12px 0;
    border-bottom: 1px solid #dcdcdc;
  }
}
.ca-name {
  line-height: 20px;
  margin-bottom: 5px;
  span {
    color: #707070; /* 已使用 */
  }
  // 0->待使用、 2->待支付、 3->已使用、 4->退款成功、 5->已取消
  .status0 {
    color: #e83636; /* 待使用 */
  }
  .status2 {
    color: #d18200; /* 待支付 */
  }
  .status3 {
    color: #707070; /* 已使用 */
  }
  .status4 {
    color: #0098ff; /* 退款成功*/
  }
  .status5 {
    color: #9b9b9b; /* 已取消*/
  }
}
.ca-info {
  font-size: 12px;
  opacity: 0.65;
}
</style>
